<template>
    <div class="my-tag">
        <input class="input" :value="value" v-if="isShow" v-focus type="text" placeholder="输入标签"
            @keyup.enter="changeTag" @blur="isShow = false" />
        <div class="text" v-else @dblclick="isShow = true">
            {{ value }}
        </div>
    </div>
</template>

<script>
export default {
    props: {
        value: String
    },
    data() {
        return {
            isShow: false
        }
    },
    methods: {
        changeTag(e) {
            // console.log(e.target.value);

            if (e.target.value.trim() === '') {
                alert('请输入修改内容')
                return
            }
            // 隐藏输入框
            this.isShow = false
            // 修改数据
            this.$emit('input', e.target.value)

        }
    }
}
</script>

<style></style>